<template>
  <el-container>
    <el-main>
      <div style="line-height: 30px; height: 30px;margin-bottom:20px">
        <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
          <el-form-item>
            <el-input v-model="queryData.name" placeholder="商户名称" style="width: 120px;" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryData.code" placeholder="商户号码" style="width: 120px;" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.status" placeholder="状态">
              <el-option label="审核通过" value="3" />
              <el-option label="待审核" value="0" />
              <el-option label="上游审核中" value="1" />
              <el-option label="审核驳回" value="-2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <datePicker :time="queryData.time" @change="getTime" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              plain
              icon="el-icon-search"
              size="mini"
              @click="queryPageList"
            >查询</el-button>
            <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700">
        <el-table-column label="序号" prop="id" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.index}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="商家名称"
          prop="name"
          header-align="center"
          align="center"
          min-width="140"
        />
        <el-table-column
          label="商户号码"
          prop="code"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="商户联系人"
          prop="contactsName"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="联系人电话号码"
          prop="mobile"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="所在省"
          prop="addressName"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="交易时间"
          prop="operTime"
          header-align="center"
          align="center"
        />

        <el-table-column
          label="操作人"
          prop="operUser"
          header-align="center"
          align="center"
        />
        <el-table-column label="状态" prop="status" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <p>
              {{   {
              0: "待审核",
              1: "上游审核中",
              2: "审核驳回",
              3: "上游审核通过",
              4: "上游审核驳回",
              }[scope.row.status] }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作"  header-align="center" align="center">
          <template slot-scope="scope">
              
            <el-button type="text" v-if="scope.row.status !== 0" size="mini" @click="showDetail(scope.row, false)">查看</el-button>
            <el-button type="text" v-else size="mini" @click="showDetail(scope.row, true)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script>
import datePicker from "@/components/model/component/date-picker/startEndTime.vue";
import { sysAjax } from "Ajax";
export default {
  name: "SCAN",
  components: {
    datePicker
  },
  data() {
    return {
      loading: false,
      queryData: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      pageTableData: [],
      roleList: []
    };
  },
  created() {
    this.queryPageList();
    sysAjax.getRoleSelectList().then(data => {
      this.roleList = data;
    });
  },
  methods: {
    getTime(val) {
      this.queryData.submitStartTime = val.startTime + ' 00:00:00';
      this.queryData.submitEndTime = val.endTime + ' 23:59:59';
    },

    reset() {
      this.queryData = {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      };
      this.queryPageList();
    },
    queryPageList() {
      this.loading = true;
      sysAjax.selectMerchantInfos(this.queryData).then(response => {
        this.loading = false;
        for (let i in response.list) {
          response.list[i].status = Math.abs(response.list[i].status)
          response.list[i].index = ++i;
        }
        this.pageTableData = response.list;
        this.queryData.pageNum = response.currPage;
        this.queryData.pageSize = response.pageSize;
        this.queryData.totalCount = response.totalCount;
      });
    },
    pageChange(pageNo, pageSize) {
      this.queryData.pageNum = pageNo;
      this.queryData.pageSize = pageSize;
      this.queryPageList();
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val;
      this.queryPageList();
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val;
      this.queryPageList();
    },
    showDetail(val, flat) {
      this.$router.push("/merchant/list/detail?code=" + val.code + '&flat=' + flat);
    }
  }
};
</script>
<style scoped lang='scss'>
/deep/ .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
}
</style>
